在前面幾天，已經完成了 AI 行程規劃 App 的視覺骨架，並將它系統化。今天，就來將他元件化吧！

有過在設計稿中不斷複製、貼上相同的按鈕、卡片或表單欄位的狀況，或是你是工程師卻發現你請設計改動 A 處但一樣的 B C D E ，卻還是錯的時候是不是很心累QQ

幸好～Figma 的元件（Components）功能就是為了解決這個問題而生！透過元件，我們可以把重複使用的 UI 元素變成可重複使用的模組，這樣組裝起來超快，要改的時候也只要動一次，超省事！雖然一開始定義蠻煩躁的但為了未來前面多耗時一點沒關係！

什麼是 Figma 元件（Components）？

元件就是個可以重複用的 UI 元素。每個元件都有個主元件（Main Component），它就是我們的「原始範本」。當我從主元件複製一個**實例（Instance）**出來，這個實例就會繼承主元件的所有設定。

主元件（Main Component）：親手打造的原始元件，會用紫色的菱形圖示標示。當你修改主元件時，所有從它複製出來的實例都會同步更新。

實例（Instance）：從主元件複製出來的副本。你可以修改實例的顏色、文字內容或大小，但它仍然會保持與主元件的關聯，例如圓角、陰影等屬性。

如何建立你的第一個 UI 元件？

我拿按鈕來當第一個練習對象，過程比想像中簡單很多：

1. 設計基礎按鈕：
   從 Stitch Designer 匯出設計稿後，你已經有了現成的按鈕。只需要在 Figma 中選取這個按鈕（包含背景形狀和文字）。

2. 建立元件：
   選取這個長方形和文字，然後點擊上方工具列的 **「建立元件」（Create Component）**圖示（四個菱形）。也可以使用快捷鍵 Ctrl/Cmd + Alt/Option + K，完成後，會看到這個物件的邊框變成紫色，這表示它現在是主元件了。

3. 複製實例：
   就是複製貼上，就可以複製一個實例。當你試著修改這個實例的文字或顏色，會發現它的圓角和大小等屬性仍然與主元件保持一致。
   

用「變體（Variants）」讓元件更智慧

如果按鈕有不同的狀態（例如啟用、禁用）或是不同的大小（例如大、中、小），你不需要為每一個狀態都建立一個獨立的主元件。Figma 的變體功能可以幫你把這些相關的元件合併成一個。

1. 建立按鈕的不同狀態：
   複製剛剛建立的主元件，並修改它的顏色和文字來代表「禁用」狀態

2. 合併為變體：
   並將兩種不同狀態的按鈕設定為 Component 後，同時選取這兩個主元件，然後點擊右側面板的 「合併為變體」（Combine as Variants）。
   現在，這兩個元件會被一個紫色虛線框包圍，並在右側面板中出現屬性設定。

3. 定義變體屬性：
   你可以在右側面板為這個變體定義屬性，例如將 Property 命名為 State，然後將兩個元件的 State 屬性分別設定為 enabled 和 disabled。

接下來他就會出現在 Asstes 面板，當你從這個變體組複製實例時，右側面板會出現一個下拉式選單，讓你直接切換按鈕的狀態，而不需要手動去修改它的屬性。

Variants 不用一口氣全部做完後續有需要也可以慢慢添加就好～

今日成果

雖然整理設計稿真的很花時間，但學會怎麼在 Figma 裡建立和使用元件，還能用變體功能來管理不同狀態，這感覺就像是學到了很多新招，一步步把設計知識都串聯起來了，真的蠻有成就感的～～

不過我也發現，目前的配色在禁用狀態下有點不明顯，這部分可能之後需要再調整一下。但相信，既然已經有設計系統當作基礎，接下來的挑戰應該就是配色這類的美感問題了啊哈，若未來有調整心得會再分享～

下一篇預告：

元件都準備好了，接下來要回到 Flutter 進行開發了，把這些元件變成真正的程式碼～我會用各種 UI 元件當例子，一個一個刻出來，並讓它們變得可重複使用